<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <input class="input" type="text" @keyup.enter="addTodo" autofocus autocomplete="off" :placeholder="placeholder" v-model="newTodo">
    <ul class="tags">
      <li v-for="tag in tags" >
        <router-link :to="tag.link" tag="li" active-class="selected"><a>{{tag.name}}</a></router-link>
      </li>
      <li class="total">Total {{ remaining }} item todo.</li>
    </ul>
    <button class="clear" type="button" @click="clearCompleted" v-show="remaining > 0">Clear completed</button>
    <ul class="list">
      <li v-for="todo in filteredTodos" :class="[{completed : todo.completed},'view']">
        <input type="checkbox" v-model="todo.completed">
        <label @dblclick="startEdit(todo)">{{ todo.name }}</label>
        <button class="destroy" @click="removeTodo(todo)"></button>
        <input type="text" v-model="todo.name" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)" @blur="doneEdit(todo)" v-show="editTodo == todo" v-focus="todo == editTodo">
      </li>
    </ul>
  </div>
</template>

<script>
const STORAGE_KEY = 'todos-vuejs-2.0'
const todoStorage = {
  fetch: function () {
    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach(function (todo, index) {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save: function (todos) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

export default {
  name: 'hello',
  data () {
    return {
      title: 'Good Good Study! Day Day Up!',
      placeholder: 'What needs to be done?',
      visibility: this.$route.params.id,
      newTodo: '',
      tags: [{
        link: '/all',
        name: 'All'
      }, {
        link: '/complete',
        name: 'Complete'
      }, {
        link: '/active',
        name: 'Active'
      }],
      todos: todoStorage.fetch(),
      editTodo: null
    }
  },
  methods: {
    addTodo: function () {
      var value = this.newTodo && this.newTodo.trim()
      if (!value) {
        return
      }
      this.todos.push({
        id: todoStorage.uid++,
        name: value,
        completed: false
      })
      this.newTodo = ''
    },
    removeTodo: function (todo) {
      this.todos.splice(this.todos.indexOf(todo), 1)
    },
    clearCompleted: function () {
      this.todos = this.todos.filter(function (item) {
        return !item.completed
      })
    },
    doneTodo: function (todo) {
      todo.completed = !todo.completed
    },
    startEdit: function (todo) {
      this.editTodo = todo
      this.cacheTodo = todo.name
    },
    doneEdit: function (todo) {
      if (!this.editTodo) {
        return
      }
      this.editTodo = null
      todo.name = todo.name.trim()
      if (!todo.name) {
        this.removeTodo(todo)
      }
    },
    cancelEdit: function (todo) {
      this.editTodo = null
      todo.name = this.cacheTodo
    }
  },
  computed: {
    all: function () {
      return this.todos
    },
    active: function () {
      if (this.todos) {
        return this.todos.filter(function (item) {
          return !item.completed
        })
      } else {
        return []
      }
    },
    complete: function () {
      if (this.todos) {
        return this.todos.filter(function (item) {
          return item.completed
        })
      } else {
        return []
      }
    },
    filteredTodos: function () {
      return this[this.visibility]
    },
    remaining: function () {
      return this[this.visibility].length
    }
  },
  watch: {
    todos: {
      handler: function (todos) {
        todoStorage.save(todos)
      },
      deep: true
    },
    $route: {
      handler: function () {
        // this.currentTodos = this[this.$route.params.id]
        this.visibility = this.$route.params.id
      },
      deep: true
    }
  },
  directives: {
    focus: function (el, binding) {
      if (binding.value) {
        el.focus()
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" src="./hello.less"></style>
